<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>直接引用vue绑定多个属性</title>
  <script type="text/javascript" src="../assets/vue.js"></script>
</head>

<body>
  <div id="example">
    <my-component v-bind:items="items" v-bind:list="list"></my-component>
  </div>

  <script>
    // 注册
    Vue.component('my-component', {
      template: `<div>
                <ul><li v-for='item in items'>{{item}}</li></ul>
                <ul><li v-for='a in list'>{{a}}</li></ul>
                </div>`,
      props: ["items", "list"]
    })
    // 创建根实例
    new Vue({
      el: '#example',
      data: {
        items: ['c', 'd'],
        list: ['a', 'b']
      }
    })
  </script>
</body>

</html>